<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh">
<!--style="background: url('../images/农业.jpg') no-repeat;background-size: 100%"-->

<head>
    <meta charset="UTF-8">
    <title>滑动开关按钮</title>
    <style>
        .top {
            text-align: center;
            width: 100%;
            height: 80px;
            line-height: 80px;
        }

        body {
            padding: 0;
            margin: 0;
        }

        img {
            opacity: 0.6;
            filter: alpha(opacity=40)
        }

        .theme {
            height: 50px;
            margin-right: 10%;
            font-size: 24px;
            text-align: right;
        }

        input {
            display: inline-block;
            border-radius: 100%;
            margin-right: 10px;
            vertical-align: middle;
        }

        input[type="button"][kid="kai"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 80px;
            height: 50px;
            /*border-radius: 50%;*/
            margin-right: 10px;
            background-color: #01cd78;
            border: 1px solid #01cd78;
            background-clip: content-box;
            padding: 5px;

        }

        input[type="button"][kid="kaio"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 80px;
            height: 50px;
            /*border-radius: 50%;*/
            margin-right: 10px;
            background-color: #01cd78;
            border: 1px solid #01cd78;
            background-clip: content-box;
            padding: 5px;

        }

        input[type="button"][kid="guan"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 80px;
            height: 50px;
            /*border-radius: 50%;*/
            margin-right: 5px;
            background-color: red;
            border: 1px solid red;
            background-clip: content-box;
            padding: 5px;

        }

        input[type="button"][kid="guano"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 80px;
            height: 50px;
            /*border-radius: 50%;*/
            margin-right: 5px;
            background-color: red;
            border: 1px solid red;
            background-clip: content-box;
            padding: 5px;

        }


        input[type="button"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
            </style>
    <script src="/static/home/js/jquery-3.4.1.min.js"></script>
</head>

<body style="min-height: 300px;height:auto">
	
    <div class="top">
        <h1>设备控制</h1>
    </div>
    <!--<p>-->
    <!--<span class="theme">{$vo2['control_shortname']}</span>-->
    <!--{if condition="$vo2['is_open'] eq 1"}-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"  checked   value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}">开-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"      value="0" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">关-->
    <!--{else /}-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"    value="1" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">开-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"  checked   value="0" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">关-->
    <!--{/if}-->
    <!--</p>-->
<div style="display: flex;justify-content: center;width: 100%;">
    <div style="width: 65%">
        
        <div class="tab-iframes" style="width: 100%;">
            <iframe id="iframe1" style="width: 100%;height: 800px;" src="http://49.122.47.235" scrolling="no"
                    frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
            <!--<iframe  style="width: 100%;" id="iframe2" scrolling="no" frameborder="0"  name="iframes" onload="this.height=this.contentWindow.document.documentElement.scrollHeight;"></iframe>-->
            <!--<iframe id="iframe2" src="{:url('history')}" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight;this.style.display='none'"-->
                    <!--style="width:  100%;" ></iframe>-->
            <!--<iframe id="iframe3" src="{:url('control')}" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight;this.style.display='none'"-->
                    <!--style="width:  100%;"></iframe>-->
        </div>
    </div>
    <div style="width: 35%;margin-top:110px;">
            {foreach name="result" item="vo2" }
            <p style="display: flex">
                <span class="theme" style="flex: 1">{$vo2['control_shortname']}</span>
                <span style="flex: 1" style="vertical-align: middle;">
                    {if condition="$vo2['is_open'] eq 1"}
                    <input type="button" id="kai{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}" kid="kai"
                        class="item{$key+1}" value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
                    <label for="kai{$vo2['id']}"></label>
                    <input type="button" id="guan{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}" kid="guan"
                        class="item{$key+1}" value="0" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
                    <label for="guan{$vo2['id']}"></label>
                    {else /}
                    <input type="button" id="kaio{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}" kid="kaio"
                        class="item{$key+1}" value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
                    <label for="kaio{$vo2['id']}"></label>
                    <input type="button" id="guano{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}"
                        kid="guano" class="item{$key+1}" value="0" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
                    <label for="guano{$vo2['id']}"></label>
                    {/if}
                </span>
                <img src="{$vo2['open_imgUrl']}"  data-open_imgUrl="{$vo2['open_imgUrl']}"  data-control_id="{$vo2['control_id']}" id="{$vo2['gateway_id']}{$vo2['control_id']}"  data-close_imgUrl="{$vo2['close_imgUrl']}"  data-gateway_id="{$vo2['gateway_id']}" style="width:54px;height:54px; display:inline-block;"alt="">
            </p>
            {/foreach}
        
    </div>
</div>
 
</body>

</html>
<script>   
    ws = new WebSocket("ws://49.122.47.147:65510");
    var heartCheck = {
        timeout: 8000,//60ms
        timeoutObj: null,
        reset: function () {
            clearInterval(this.timeoutObj);
            this.start();
        },
        start: function () {
            this.timeoutObj = setInterval(function () {
                var message = { "type": "ping" };
                // var message = {"uid":"1","gateway_id":"wenshi_15","data":{"dev_id":'qiya',"value":1}};
                ws.send(JSON.stringify(message));
            }, this.timeout)
        }
    }
    ws.onopen = function () {
        heartCheck.start();
    };
    ws.onmessage = function (event) {
        heartCheck.reset();
    };
    for (var i = 1; i <= {$count}; i++) {
        var c = "item" + i;
        $("input[type=button][class=" + c + "]").click(function () {
            var current_value = this.value;
            console.log(current_value);
            //得到class名字
            var cla = this.className;
            // 得到控制设备macid
            var control_id = this.dataset.dev_id;
			// 得到网关id  --  网关编码 （列如：wenshi_15）
			var gateway_id = this.dataset.gateway_id;
			// 得到网关id  --  id  主键
			var wangguan_id = this.dataset.wangguan_id;
            var message = { "uid": "1", "gateway_id": gateway_id, "data": { "dev_id": control_id, "data": current_value } };
             ws.send(JSON.stringify(message));

            // 联动控制
            $.post("{:url('index/getControlRelation')}", { control_id: control_id, wangguan_id:wangguan_id }, function (res) {
                if (res.code != 0) {
                    for (let i = 0; i < res.data.length; i++) {
                        const e = res.data[i];
                        var msg = { "uid": "1", "gateway_id": gateway_id, "data": { "dev_id": e, "data": current_value } };
                         ws.send(JSON.stringify(msg));
                    }
                }
            })
        });
    }

</script>

<script>
    setInterval(function () {
        $.post("{:url('get_status')}", {}, function (res) {
	
			for(var i in res.key){
			console.log(res.value[i]);
			
				if(res.value[i] == 0 ){
console.log($("#wenshi_15"+res.key[i]).attr("data-close_imgUrl"));
					$("#wenshi_15"+res.key[i]).attr("src",$("#wenshi_15"+res.key[i]).attr("data-close_imgUrl"));
				}else{
					$("#wenshi_15"+res.key[i]).attr("src",$("#wenshi_15"+res.key[i]).attr("data-open_imgUrl"))
				}
			}
		
        });
    }, 1000);
	
</script>
